<template>
  <view class="filter-selector">
    <view class="filter">
      <!-- 筛选框显示时，给当前点击的索引添加激活样式 -->
      <!-- {{defaultQuery}} -->
      <view class="filter-item" :class="{'active': filterVisible && key === current}"
        v-for="(val, key) in defaultQuery" :key="key" @click="open(key)">
        <text class="name">{{val.name}}</text>
        <!-- <uni-icons :type="setIcon(item, index)" size="12"></uni-icons> -->
        <u-icon :name="setIcon(key)" size="12"></u-icon>
      </view>
    </view>
    <view class="list" v-show="filterVisible">
      <!-- <view v-for="(item ,i) in data[current]" :key="i">{{item.name}}</view> -->
      <view class="list-item" :class="{'active': isActive(i)}" v-for="(item ,i) in data[current]" :key="i"
        @click="change(item, i)">{{item.name}}</view>
    </view>
    <view class="mask" v-if="filterVisible" :style="{top: maskOffsetTop + 'px'}" @click="filterVisible = false"></view>
    <!-- <view class="mask" v-if="filterVisible" @click="filterVisible = false">aa</view> -->
    <!-- <uni-popup ref="popup" type="top"></uni-popup> -->
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object
      }
    },
    data() {
      return {
        // 查询条件
        defaultQuery: {},
        // 当前选择的条件索引属性key
        current: '',
        // 选择当前key下面的数组索引
        index: 0,
        filterVisible: false,
        maskVisible: false,
        maskOffsetTop: 0
        
      }
    },
    methods: {
      change(data, i) {
        this.index = i
        this.defaultQuery[this.current].name = data.name
        this.filterVisible = false
        this.$emit('change', {
          key: this.current,
          index: i,
          data: data
        })
      },
      open(key) {
        this.current = key
        this.filterVisible = !this.filterVisible
      },
      // 动态设置箭头方向
      setIcon(key) {
        return this.filterVisible && key === this.current ? 'arrow-up' : 'arrow-down'
      },
      // 动态设置激活样式
      isActive(index) {
        return this.index === index
      }
    },
    created() {
      this.current = Object.keys(this.data)[0]
      console.log(this.current)
      for (let key in this.data) {
        this.defaultQuery[key] = {
          ...this.data[key][0]
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .filter {
    position: relative;
    z-index: 99;
    color: $uni-text-color-grey;
    background-color: #FFFFFF;

    .filter-item {
      display: flex;
      padding: 16rpx 20rpx;
      font-size: 26rpx;

      .name {
        margin-right: 6rpx;
      }
    }
  }

  .list {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #FFFFFF;

    .list-item {
      width: 100%;
      padding: 18rpx 0;
      text-align: center;
      border-bottom: 2rpx solid #EEEEEE;
      font-size: 24rpx;
    }
  }

  .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // border-radius: 20rpx;
    z-index: 1;
    background-color: rgba(0, 0, 0, .4);
  }

  .active {
    color: $primary-color;
  }
</style>
